<template>
	<view class="page">
		<view v-if="customer.scheduleNo" class="qrocode">
			<canvas canvas-id="myQrcode" style="width: 250px; height: 250px;"></canvas>
			<view class="action-area">
				<button class="btn-mid btn-primary" @click="saveQRCode">保存二维码</button>
			</view>
		</view>
		<view class="container">
			<uni-forms :modelValue="customer" :label-width="100" label-align="right">
				<uni-forms-item label="姓名" name="customerName">
					<uni-easyinput type="text" v-model="customer.customerName" disabled placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="业务员" name="zhongjieYWYName">
					<uni-easyinput type="text" v-model="customer.zhongjieYWYName"  placeholder="请输入业务员名字" />
				</uni-forms-item>
				<uni-forms-item label="业务员电话" name="zhongjieYWYPhone">
					<uni-easyinput type="text" v-model="customer.zhongjieYWYPhone"  placeholder="请输入业务员电话" />
				</uni-forms-item>
				<uni-forms-item label="业务员门店" name="zhongjieYWYShop">
					<uni-easyinput type="text" v-model="customer.zhongjieYWYShop"  placeholder="请输入业务员门店" />
				</uni-forms-item>
				<uni-forms-item label="报备号码" name="style">
					<uni-easyinput type="text" v-model="phone"  disabled />
				</uni-forms-item>
				<uni-forms-item label="报备方式" name="style">
					<uni-data-checkbox mode="tag" v-model="style" :disabled="!!customer.scheduleNo" :localdata="range"></uni-data-checkbox>
				</uni-forms-item>
				<button class="button-primary" @click="submit" v-if="!customer.scheduleNo">报备</button>
			</uni-forms>
		</view>
	</view>
</template>
<script>
	import UQRCode from 'uqrcodejs';
	export default {
		data() {
			return {
				customer: {
					scheduleNo:''
				},
				range: [{"value": 2,"text": "全号"	},{"value": 1,"text": "隐私"}],
				style:1
			}
		},
		computed:{
			phone(){
				let style = this.style
				if(style == 1){
					return this.$formatPhone(this.customer.phone)
				}
				return this.customer.phone
			}
		},
		onLoad() {
			const customer = uni.getStorageSync('customer')
			this.style = customer.scheduleType || 1
			this.customer = customer
			// if (customer.scheduleNo) {
			// 	this.showQrcode()
			// }
		},
		mounted() {
			if (this.customer.scheduleNo) {
				this.showQrcode(this.customer)
			}
		},
		methods: {
			async submit() {
				let curTime = this.$formatYear(new Date())
				let customer = this.customer 
				const postCustomer = {...customer}
				delete postCustomer._id
				
				if(this.style == 1){
					postCustomer.schedulePhone = this.$formatPhone(customer.phone)
				}
				await this.$cloudOBjAjax('middleman-advisor-customers','updateCustomer',{
					id: customer._id,
					scheduleType:this.style,
					...postCustomer
				});
				
				console.log('')
				
				
				let postData  = {
					customerId: customer._id,
					schedule_time: curTime,
					scheduleType:this.style
				}
				
				if(this.style == 1){
					postData.schedulePhone = this.$formatPhone(customer.phone)
				}
				await this.$cloudOBjAjax('customer-lifecycle-history', 'addZJSchedule', {
					...postData
				}).then(res => {
					this.customer.scheduleNo = res
					this.$forceUpdate()
					this.showQrcode(this.customer)
					this.$simpleToast('报备成功')
				})
			},
			showQrcode(item) {
				setTimeout(() => {
					const qrcode = new UQRCode();
					qrcode.data = item.scheduleNo;
					qrcode.size = 250;
					qrcode.margin = 15;
					qrcode.foregroundColor = '#000000';
					qrcode.backgroundColor = '#ffffff';
					qrcode.errorCorrectLevel = UQRCode.errorCorrectLevel.H;
					qrcode.make();
					const ctx = uni.createCanvasContext('myQrcode', this);
					qrcode.canvasContext = ctx;
					qrcode.draw();
				}, 100)
			},
			saveQRCode() {
				// 将canvas内容保存为图片
				uni.canvasToTempFilePath({
					canvasId: 'myQrcode',
					success: (res) => {
						// #ifdef H5
						const a = document.createElement('a');
						a.href = res.tempFilePath;
						a.download = 'qrcode.png'; // 设置下载文件名
						document.body.appendChild(a);
						a.click();
						document.body.removeChild(a);
						// #endif
						// #ifndef H5
						
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: (err) => {
								console.error('保存失败', err);
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
						// #endif
					},
					fail() {
						console.log('fail')
					}
				}, this);
			}
		}
	}
</script>

<style>
	.container {
		padding: 10rpx;
	}
	.qrocode {
		display: flex;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		align-items: center;
	}
	.btn-primary {
		padding:0 10rpx;
	}
</style>